﻿@{
    Layout = null;
    int Id = ViewBag.Id;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑权限动作列表</title>
    <!--导入UI样式-->
    <link href="~/Content/base.css" rel="stylesheet" />
    @Styles.Render("~/EasyUI/themes/insdep/css")
    <style>
        .datagrid-row {
            height: 20px;
            text-align: center;
        }

        .operation-div {
            width: 100%;
            margin: 200px 0;
        }

            .operation-div a {
                display: block;
                width: 80%;
                margin: 20px auto;
            }
    </style>
    <!--导入UI样式 End-->
    <!--导入JS-->
    <script src="/Scripts/jquery-3.2.1.min.js"></script>
    <script src="/Scripts/jquery-3.2.1.min.js"></script>
    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="/Scripts/jquery.msgBox.js"></script>
    <script src="/EasyUI/jquery.easyui.min.js"></script>
    <script src="/EasyUI/jquery.easyui.GlobalParas.js"></script>
    <script src="/EasyUI/themes/insdep/jquery.insdep-extend.min.js"></script>
    <script src="~/Scripts/Notify.js"></script>
    <script src="~/Scripts/jquery.processJsonMsg.js"></script>
    <!--导入JS End-->
</head>
<body class="easyui-layout">
    <!--左边-->
    <div data-options="region:'west',title:'动作列表',split:true,collapsible:true" style="width: 44%; font-size: 6px;">
        <table style="width: 100%" id="leftTbGrid"></table>
    </div>
    <!--左边 End-->
    <!--右边-->
    <div data-options="region:'east',title:'已添加动作列表',split:true,collapsible:true" style="width: 44%; font-size: 6px;">
        <table style="width: 100%" id="rightTbGrid"></table>
    </div>
    <!--右边-->
    <!--中间-->
    <div data-options="region:'center'" style="width: 5%; padding: 5px; background: #eee;">
        <div class="operation-div">
            <div><a id="btnAdd" href="#" class="easyui-linkbutton button-green">>></a></div>
            <div><a id="btnRemove" href="#" class="easyui-linkbutton button-red"><<</a></div>
            <div><a id="btnSave" href="#" class="easyui-linkbutton button-blue">保存更改</a></div>
        </div>
    </div>
    <!--中间 End-->
    <!--JS脚本-->
    <script>
        var $leftTbGrid = {};
        var $rightTbGrid = {};

        function initTbGrid() {
            $.globalParas.datagrid.url = '@Url.Action("GetActionPage", "Permission", new {area = "Admin"})';
            $.globalParas.datagrid.columns = [
                [
                    { field: 'Name', title: '动作名称', width: 120, align: 'center' },
                    { field: 'Url', title: 'URL地址', width: 140, align: 'center' },
                    { field: 'rMethod', title: '请求方式', width: 40, align: 'center' }
                ]
            ];
            $.globalParas.datagrid.scrollbarSize = 2;
            $.globalParas.datagrid.singleSelect = false;
            $.globalParas.datagrid.nowrap = false;
            $.globalParas.datagrid.idField = 'Id';
            $.globalParas.datagrid.removeBtn('新增');
            $.globalParas.datagrid.removeBtn('删除');
            $.globalParas.datagrid.removeBtn('修改');
            $.globalParas.datagrid.pagination = false;
            $.globalParas.datagrid.loadFilter = function(response) {
                if (response.Statu === 1) {
                    return response.Data;
                } else
                    $.msgBoxObj.showMsgErr(response.Msg, true);
            };
            // 初始化Grid控件
            $leftTbGrid = $("#leftTbGrid").datagrid($.globalParas.datagrid);

            $.globalParas.datagrid.url = '@Url.Action("GetReloAction", "Permission", new {area = "Admin",Id = Id})';
            $.globalParas.datagrid.loadFilter = function(response) {
                if (response.Statu === 1) {
                    for (var i = 0; i < response.Data.length; i++) {
                        $leftTbGrid.datagrid('deleteRow', $leftTbGrid.datagrid('getRowIndex', response.Data[i].Id));
                    }
                    return response.Data;
                } else
                    $.msgBoxObj.showMsgErr(response.Msg, true);
            };
            // 初始化Grid控件
            $rightTbGrid = $("#rightTbGrid").datagrid($.globalParas.datagrid);
        }
        $(function () {
            initTbGrid();
            $('#btnAdd').click(function () {
                // 获取选中行数据
                var rowDatas = $leftTbGrid.datagrid('getSelections');
                // 判断是否选择数据
                if (rowDatas == undefined) {
                    $.msgBoxObj.showMsgErr('未选定任何行!', true);
                }
                for (var i = 0; i < rowDatas.length; i++) {
                    $rightTbGrid.datagrid('insertRow', { index: 0, row: rowDatas[i]});
                }
                for (var i = rowDatas.length -1; i >= 0; i--) {
                    $leftTbGrid.datagrid('deleteRow', $leftTbGrid.datagrid('getRowIndex', rowDatas[i]));
                }
            });
            $('#btnRemove').click(function () {
                // 获取选中行数据
                var rowDatas = $rightTbGrid.datagrid('getSelections');
                // 判断是否选择数据
                if (rowDatas == undefined) {
                    $.msgBoxObj.showMsgErr('未选定任何行!', true);
                }
                for (var i = 0; i < rowDatas.length; i++) {
                    $leftTbGrid.datagrid('insertRow', { index: 0, row: rowDatas[i]});
                }
                for (var i = rowDatas.length -1; i >= 0; i--) {
                    $rightTbGrid.datagrid('deleteRow', $rightTbGrid.datagrid('getRowIndex', rowDatas[i]));
                }
            });
            $('#btnSave').click(function() {
                var putData = { ReloId:@Id, ActionIds: [] };
                var rowDatas = $rightTbGrid.datagrid('getRows');
                for (var item in rowDatas) {
                    putData.ActionIds.push(rowDatas[item].Id);
                }
                $.ajax({
                    url: '@Url.Action("PutReloAction","Permission",new{area = "Admin"})',
                    type: 'Put',
                    data: putData,
                    error: function(xhrObj) {
                        $.msgBoxObj.showErrors(xhrObj.responseText);
                    },
                    success: function(response) {
                        $.processJsonMsg(response, function() {
                            if (response.Statu === 1) {
                                window.top.topHelper.closeComWindow();
                                window.top.topHelper.updateDataGrid();
                            }
                        });
                    }
                });
            });
        });
    </script>
    <!--JS脚本 End-->
</body>
</html>